<template>
  <div class="app-container">
    <el-row>
      <el-col :span="20">
        <el-row class="">
          <!-- 左边列 -->
          <el-col :span="7">
            <div class="input-container">
              <div class="text-bold margin-little-bottom">左边列:{{handle.left.length}}</div>
              <el-input
                type="textarea"
                :rows="9"
                placeholder="左边列"
                @blur="parseColumns($event,'left')"
                v-model="left">
              </el-input>
            </div>
          </el-col>
          <!-- 右边列 -->
          <el-col :span="7" class="margin-small-left">
            <div class="input-container">
              <div class="text-bold margin-little-bottom">右边列:{{handle.right.length}}</div>
              <el-input
                type="textarea"
                :rows="9"
                placeholder="右边列"
                @blur="parseColumns($event,'right')"
                v-model="right">
              </el-input>
            </div>
          </el-col>
          <!-- 忽略列 -->
          <el-col :span="7" class="margin-small-left">
            <div class="input-container">
              <div class="text-bold margin-little-bottom">忽略列:{{handle.ignore.length}}</div>
              <el-input
                type="textarea"
                :rows="9"
                placeholder="忽略列"
                @blur="parseColumns($event,'ignore')"
                v-model="ignore">
              </el-input>
            </div>
          </el-col>
        </el-row>

        <el-row>
          <!-- 左边多出列 -->
          <el-col :span="7">
            <div class="input-container">
              <div class="text-bold ">
                <el-button type="text" class="text-forestgreen" icon="el-icon-document-copy" @click="copyText(leftMuti,$event)">复制</el-button>
                左边比右边多出列:{{handle.leftMuti.length}}
              </div>
              <el-input
                type="textarea"
                :rows="9"
                placeholder="左边多于右边"
                v-model="leftMuti">
              </el-input>
            </div>
          </el-col>
          <!-- 右边列 -->
          <el-col :span="7" class="margin-small-left">
            <div class="input-container">
              <div class="text-bold ">
                <el-button type="text" class="text-forestgreen" icon="el-icon-document-copy" @click="copyText(rightMuti,$event)">复制</el-button>
                右边比左边多出列:{{handle.rightMuti.length}}
              </div>
              <el-input
                type="textarea"
                :rows="9"
                placeholder="右边多余左边"
                v-model="rightMuti">
              </el-input>
            </div>
          </el-col>
          <!-- 相等的列 -->
          <el-col :span="7" class="margin-small-left">
            <div class="input-container">
              <div class="text-bold ">
                <el-button type="text" class="text-forestgreen" icon="el-icon-document-copy" @click="copyText(equal,$event)">复制</el-button>
                相等的列:{{handle.equal.length}}
              </div>
              <el-input
                type="textarea"
                :rows="9"
                placeholder="相等列"
                v-model="equal">
              </el-input>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="4">
        <el-checkbox v-model="setting.ignoreAb" label="忽略大小写"/>
        <el-checkbox v-model="setting.ignoreUnderline" label="忽略下划线"/>
        <el-checkbox v-model="setting.ignoreSpace" checked label="忽略空白"/>

        <div class="margin-top">
          <el-button type="primary" size="small" @click="compare">开始比较</el-button>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import clip from '@/utils/clipboard'

function inArray(val,array){
  if (!array || array.length === 0){
    return -1;
  }
  for (let i = 0; i < array.length; i++) {
    if (array[i] === val){
      return i;
    }
  }
  return -1;
}

export default {
  name: "compare",
  data() {
    return {
      left: null,
      right: null,
      ignore: null,
      rightMuti: null,
      leftMuti: null,
      equal: null,
      handle:{
        left: [],
        right: [],
        ignore: [],
        rightMuti: [],
        leftMuti: [],
        equal:[]
      },
      setting:{
        ignoreAb: false,
        ignoreUnderline: false,
        ignoreSpace: true
      }
    }
  },
  methods:{
    copyText(text, event){
      clip(text, event)
    },
    parseColumns(event,mark){
      let value = event.target.value.trim().split('\n');

      let handleValue = [];
      for (let i = 0; i < value.length; i++) {
        let item = value[i];
        if (this.setting.ignoreSpace){
          item = item.trim();
        }
        if (this.setting.ignoreAb){
          item = item.toLowerCase();
        }
        if (this.setting.ignoreUnderline){
          item = item.replace(/_/g,'');
        }
        if (item){
          handleValue.push(item);
        }
      }

      this.handle[mark]  = handleValue;
    },
    compare(){
      var needCompare = true;
      //重新初始化 leftMuti,rightMuti,equal
      this.handle.rightMuti = [];
      this.handle.leftMuti = [];
      this.handle.equal = [];

      if(this.handle.ignore.length == 0){
        //没有需要忽略的列
        if(this.handle.right.length > 0 && this.handle.left.length === 0){
          this.handle.rightMuti = this.handle.right;
          needCompare = false;
        }else if(this.handle.right.length === 0 && this.handle.left.length > 0){
          this.handle.leftMuti = this.handle.left;
          needCompare = false;
        }
      }else{
        //去除需要忽略的列
        if(this.handle.right.length > 0 && this.handle.left.length === 0){
          //右边多出全部列
          for(var i=0;i<this.handle.right.length;i++){
            if(inArray(this.handle.right[i],this.handle.ignore) === -1){
              this.handle.rightMuti.push(this.handle.right[i]);
            }
          }
          needCompare = false;
        }else if(this.handle.right.length ==0 && this.handle.left.length > 0){
          for(var i=0;i<this.handle.left.length;i++){
            if(inArray(this.handle.left[i],this.handle.ignore) == -1){
              this.handle.leftMuti.push(this.handle.left[i]);
            }
          }
          needCompare = false;
        }
      }
      //其它情况都需要比较
      if(needCompare){
        //统计相同的列
        for(var i=0;i<this.handle.left.length;i++){
          //首先过滤忽略的列
          if(inArray(this.handle.left[i],this.handle.ignore) != -1){
            continue;
          }
          for(var j=0;j<this.handle.right.length;j++){
            if(this.handle.left[i] == this.handle.right[j]){
              this.handle.equal.push(this.handle.left[i]);
            }
          }
        }
        //统计旧列比新列多出的列 注:比较的列中不能有分号
        var eqCols = ';'+this.handle.equal.join(';')+';';		//相同的列
        for(var i=0;i<this.handle.left.length;i++){
          //首先过滤忽略的列
          if(inArray(this.handle.left[i],this.handle.ignore) != -1){
            continue;
          }
          if(eqCols.indexOf(';'+this.handle.left[i]+';') === -1){
            this.handle.leftMuti.push(this.handle.left[i]);
          }
        }
        //统计新列比旧列多出的列
        for(var i=0;i<this.handle.right.length;i++){
          //首先过滤忽略的列
          if(inArray(this.handle.right[i],this.handle.ignore) !== -1){
            continue;
          }
          if(eqCols.indexOf(';'+this.handle.right[i]+';') === -1){
            this.handle.rightMuti.push(this.handle.right[i]);
          }
        }
      }

      // 转换数据
      this.leftMuti = this.handle.leftMuti.join('\n');
      this.rightMuti = this.handle.rightMuti.join('\n');
      this.equal = this.handle.equal.join('\n');
    }
  }
}
</script>

<style scoped>
  button{
    padding-top: 8px;
    padding-bottom: 8px;
  }
.input-container{
  padding: 0 15px;
}
  /deep/ .input-container textarea{
    white-space: nowrap;
    overflow: scroll;
  }
</style>
